<template lang="pug">
  div.home
    div {{title}}
    div.img-cells
      div.img-cell(v-for="item in imgs" :key="item" :style="{'background-image': 'url('+item+')'}" :data-url="item" @click="imgClick(item)")
</template>
<script>
  // @ is an alias to /src
  // import HelloWorld from '@/components/HelloWorld.vue'
  // import $ from 'jquery'
  import * as config from './config.toml'

  export default {
    name: 'home',
    components: {},
    data() {
      return {
        imgs: [],
        title: config.title
      }
    },
    mounted() {
      // $(document).on('click', '.img-cell', function (e) {
      //   console.log($(e).index())
      //   console.log($('.img-cell').findIndex(e))
      // })
      setTimeout(() => {
        this.imgs = [
          '/imgs/1.jpg',
          '/imgs/2.jpeg',
          '/imgs/3.jpeg',
          '/imgs/4.jpg',
          '/imgs/5.jpg',
          '/imgs/6.jpg']
      }, 500)
    },
    methods: {
      imgClick(item) {
        this.$KalixDialogImgPreview({
          imgs: this.imgs,
          selectItem: item
        })
      },
    }
  }
</script>
<style lang="stylus">
  .img-cells
    display flex
    justify-content center
    align-items center
    .img-cell
      width 200px
      height 200px
      border 1px solid #ccc
      box-sizing border-box
      background 50% 50% no-repeat
      background-size cover

</style>
